<section>
<!-- BEGIN HEADER -->
<!-- ko if: hasHeader() -->
<div class="header navbar navbar-fixed-top">
<!-- BEGIN TOP NAVIGATION BAR -->
<div class="header-inner container">

<!-- BEGIN LOGO -->
<a class="navbar-brand" href="index.html" style="padding: 0px">
    <img src="assets/img/logo.png" alt="logo" class="img-responsive" style="height: 40px; margin: 1px">
</a>
<!-- END LOGO -->

<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a href="javascript:;" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <img src="assets/img/menu-toggler.png" alt="">
</a>
<!-- END RESPONSIVE MENU TOGGLER -->

<!-- BEGIN TOP NAVIGATION MENU -->
<ul class="nav navbar-nav pull-right">
<!-- BEGIN NOTIFICATION DROPDOWN -->
<li class="dropdown" id="header_notification_bar">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <i class="fa fa-warning"></i>
            <span class="badge">
                 6
            </span>
    </a>
    <ul class="dropdown-menu extended notification">
        <li>
            <p>
                You have 14 new notifications
            </p>
        </li>
        <li>
            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 250px;">
                <ul class="dropdown-menu-list scroller" style="height: 250px; overflow: hidden; width: auto;">
                <li>
                    <a href="#">
                        <span class="label label-sm label-icon label-success">
                            <i class="fa fa-plus"></i>
                        </span>
                            New user registered.
                        <span class="time">
                            Just now
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="label label-sm label-icon label-danger">
                            <i class="fa fa-bolt"></i>
                        </span>
                            Server #12 overloaded.
                        <span class="time">
                            15 mins
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="label label-sm label-icon label-warning">
                            <i class="fa fa-bell-o"></i>
                        </span>
                            Server #2 not responding.
                        <span class="time">
                             22 mins
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="label label-sm label-icon label-info">
                            <i class="fa fa-bullhorn"></i>
                        </span>
                            Application error.
                        <span class="time">
                            40 mins
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                                <span class="label label-sm label-icon label-danger">
                                    <i class="fa fa-bolt"></i>
                                </span>
                        Database overloaded 68%.
                                <span class="time">
                                     2 hrs
                                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                                <span class="label label-sm label-icon label-danger">
                                    <i class="fa fa-bolt"></i>
                                </span>
                        2 user IP blocked.
                                <span class="time">
                                     5 hrs
                                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                                <span class="label label-sm label-icon label-warning">
                                    <i class="fa fa-bell-o"></i>
                                </span>
                        Storage Server #4 not responding.
                                <span class="time">
                                     45 mins
                                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                                <span class="label label-sm label-icon label-info">
                                    <i class="fa fa-bullhorn"></i>
                                </span>
                        System Error.
                                <span class="time">
                                     55 mins
                                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                                <span class="label label-sm label-icon label-danger">
                                    <i class="fa fa-bolt"></i>
                                </span>
                        Database overloaded 68%.
                                <span class="time">
                                     2 hrs
                                </span>
                    </a>
                </li>
            </ul><div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; z-index: 99; right: 1px; height: 152.4390243902439px; background: rgb(187, 187, 187);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(234, 234, 234);"></div></div>
        </li>
        <li class="external">
            <a href="#">
                See all notifications <i class="m-icon-swapright"></i>
            </a>
        </li>
    </ul>
</li>
<!-- END NOTIFICATION DROPDOWN -->
<!-- BEGIN INBOX DROPDOWN -->
<li class="dropdown" id="header_inbox_bar">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <i class="fa fa-envelope"></i>
                <span class="badge">
                     5
                </span>
    </a>
    <ul class="dropdown-menu extended inbox">
        <li>
            <p>
                You have 12 new messages
            </p>
        </li>
        <li>
            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 250px;"><ul class="dropdown-menu-list scroller" style="height: 250px; overflow: hidden; width: auto;">
                <li>
                    <a href="inbox.html?a=view">
                                <span class="photo">
                                    <img src="./assets/img/avatar2.jpg" alt="">
                                </span>
                                <span class="subject">
                                    <span class="from">
                                         Lisa Wong
                                    </span>
                                    <span class="time">
                                         Just Now
                                    </span>
                                </span>
                                <span class="message">
                                     Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh...
                                </span>
                    </a>
                </li>
                <li>
                    <a href="inbox.html?a=view">
                                <span class="photo">
                                    <img src="./assets/img/avatar3.jpg" alt="">
                                </span>
                                <span class="subject">
                                    <span class="from">
                                         Richard Doe
                                    </span>
                                    <span class="time">
                                         16 mins
                                    </span>
                                </span>
                                <span class="message">
                                     Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh...
                                </span>
                    </a>
                </li>
                <li>
                    <a href="inbox.html?a=view">
                                <span class="photo">
                                    <img src="./assets/img/avatar1.jpg" alt="">
                                </span>
                                <span class="subject">
                                    <span class="from">
                                         Bob Nilson
                                    </span>
                                    <span class="time">
                                         2 hrs
                                    </span>
                                </span>
                                <span class="message">
                                     Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh...
                                </span>
                    </a>
                </li>
                <li>
                    <a href="inbox.html?a=view">
                                <span class="photo">
                                    <img src="./assets/img/avatar2.jpg" alt="">
                                </span>
                                <span class="subject">
                                    <span class="from">
                                         Lisa Wong
                                    </span>
                                    <span class="time">
                                         40 mins
                                    </span>
                                </span>
                                <span class="message">
                                     Vivamus sed auctor 40% nibh congue nibh...
                                </span>
                    </a>
                </li>
                <li>
                    <a href="inbox.html?a=view">
                                <span class="photo">
                                    <img src="./assets/img/avatar3.jpg" alt="">
                                </span>
                                <span class="subject">
                                    <span class="from">
                                         Richard Doe
                                    </span>
                                    <span class="time">
                                         46 mins
                                    </span>
                                </span>
                                <span class="message">
                                     Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh...
                                </span>
                    </a>
                </li>
            </ul><div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; z-index: 99; right: 1px; background: rgb(187, 187, 187);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(234, 234, 234);"></div></div>
        </li>
        <li class="external">
            <a href="inbox.html">
                See all messages <i class="m-icon-swapright"></i>
            </a>
        </li>
    </ul>
</li>
<!-- END INBOX DROPDOWN -->
<!-- BEGIN DROPDOWN -->
<li class="dropdown" id="header_task_bar">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <i class="fa fa-tasks"></i>
                <span class="badge">
                     5
                </span>
    </a>
    <ul class="dropdown-menu extended tasks">
        <li>
            <p>
                You have 12 pending tasks
            </p>
        </li>
        <li>
            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 250px;"><ul class="dropdown-menu-list scroller" style="height: 250px; overflow: hidden; width: auto;">
                <li>
                    <a href="#">
                                <span class="task">
                                    <span class="desc">
                                         New release v1.2
                                    </span>
                                    <span class="percent">
                                         30%
                                    </span>
                                </span>
                                <span class="progress">
                                    <span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                                        <span class="sr-only">
                                             40% Complete
                                        </span>
                                    </span>
                                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                                <span class="task">
                                    <span class="desc">
                                         Application deployment
                                    </span>
                                    <span class="percent">
                                         65%
                                    </span>
                                </span>
                                <span class="progress progress-striped">
                                    <span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
                                        <span class="sr-only">
                                             65% Complete
                                        </span>
                                    </span>
                                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                                <span class="task">
                                    <span class="desc">
                                         Mobile app release
                                    </span>
                                    <span class="percent">
                                         98%
                                    </span>
                                </span>
                                <span class="progress">
                                    <span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100">
                                        <span class="sr-only">
                                             98% Complete
                                        </span>
                                    </span>
                                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                                <span class="task">
                                    <span class="desc">
                                         Database migration
                                    </span>
                                    <span class="percent">
                                         10%
                                    </span>
                                </span>
                                <span class="progress progress-striped">
                                    <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                                        <span class="sr-only">
                                             10% Complete
                                        </span>
                                    </span>
                                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                                <span class="task">
                                    <span class="desc">
                                         Web server upgrade
                                    </span>
                                    <span class="percent">
                                         58%
                                    </span>
                                </span>
                                <span class="progress progress-striped">
                                    <span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100">
                                        <span class="sr-only">
                                             58% Complete
                                        </span>
                                    </span>
                                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                                <span class="task">
                                    <span class="desc">
                                         Mobile development
                                    </span>
                                    <span class="percent">
                                         85%
                                    </span>
                                </span>
                                <span class="progress progress-striped">
                                    <span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                                        <span class="sr-only">
                                             85% Complete
                                        </span>
                                    </span>
                                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                                <span class="task">
                                    <span class="desc">
                                         New UI release
                                    </span>
                                    <span class="percent">
                                         18%
                                    </span>
                                </span>
                                <span class="progress progress-striped">
                                    <span style="width: 18%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100">
                                        <span class="sr-only">
                                             18% Complete
                                        </span>
                                    </span>
                                </span>
                    </a>
                </li>
            </ul><div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; z-index: 99; right: 1px; background: rgb(187, 187, 187);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(234, 234, 234);"></div></div>
        </li>
        <li class="external">
            <a href="#">
                See all tasks <i class="m-icon-swapright"></i>
            </a>
        </li>
    </ul>
</li>
<!-- END DROPDOWN -->
<!-- BEGIN USER LOGIN DROPDOWN -->
<li class="dropdown user">
    <!-- ko if: user.name() -->
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <img alt="" src="assets/img/avatar1_small.jpg" height="29px"
                data-bind="attr:{src: user.imgUrl()}">
                <span class="username" data-bind="text: user.name">
                     Full name
                </span>
        <i class="fa fa-angle-down"></i>
    </a>
    <ul class="dropdown-menu">
        <li>
            <a href="extra_profile.html">
                <i class="fa fa-user"></i> My Profile
            </a>
        </li>
        <li>
            <a href="page_calendar.html">
                <i class="fa fa-calendar"></i> My Calendar
            </a>
        </li>
        <li>
            <a href="inbox.html">
                <i class="fa fa-envelope"></i> My Inbox
                        <span class="badge badge-danger">
                             3
                        </span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-tasks"></i> My Tasks
                        <span class="badge badge-success">
                             7
                        </span>
            </a>
        </li>
        <li class="divider">
        </li>
        <li>
            <a href="javascript:;" id="trigger_fullscreen">
                <i class="fa fa-arrows"></i> Full Screen
            </a>
        </li>
        <li>
            <a href="extra_lock.html">
                <i class="fa fa-lock"></i> Lock Screen
            </a>
        </li>
        <li>
            <a href="login.html">
                <i class="fa fa-key"></i> Log Out
            </a>
        </li>
    </ul>
    <!-- /ko -->
    <!-- ko if: !user.name() -->
    <a class="sign-in-user" href="javascript:;">
        <i class="fa fa-user"></i> Sign in
    </a>
    <!-- /ko -->
</li>
<!-- END USER LOGIN DROPDOWN -->
</ul>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END TOP NAVIGATION BAR -->
</div>
<!-- /ko -->
<!-- END HEADER -->

<div class="clearfix">
</div>

<div class="container">
<div class="page-container">

<!-- BEGIN SIDEBAR MENU -->
<!-- ko if: hasSidebar() -->
<div class="page-sidebar-wrapper">
<div class="page-sidebar navbar-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 764px;"><ul class="page-sidebar-menu" data-auto-scroll="true" data-slide-speed="200" style="overflow: hidden; width: auto; height: 764px;">
<li class="sidebar-toggler-wrapper">
    <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
    <div class="sidebar-toggler hidden-phone">
    </div>
    <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
</li>
<li class="sidebar-search-wrapper">
    <!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
    <form class="sidebar-search" action="extra_search.html" method="POST">
        <div class="form-container">
            <div class="input-box">
                <a href="javascript:;" class="remove">
                </a>
                <input type="text" placeholder="Tìm kiếm...">
                <input type="button" class="submit" value=" ">
            </div>
        </div>
    </form>
    <!-- END RESPONSIVE QUICK SEARCH FORM -->
</li>
<li data-bind="css: {active: router.navigationModel()[0].title == router.activeItem().title}">
    <a href="#home">
        <i class="fa fa-home"></i>
            <span class="title">
                Tin Tức
            </span>
    </a>
</li>
<li>
    <a href="javascript:;">
        <i class="fa fa-shopping-cart"></i>
            <span class="title">
                Nhà Cung Cấp
            </span>
            <span class="arrow">
            </span>
    </a>
    <ul class="sub-menu">
        <li>
            <a href="ecommerce_index.html">
                <i class="fa fa-bullhorn"></i>
                VNExpress
            </a>
        </li>
        <li>
            <a href="ecommerce_orders.html">
                <i class="fa fa-shopping-cart"></i>
                Tuổi Trẻ
            </a>
        </li>
        <li>
            <a href="ecommerce_orders_view.html">
                <i class="fa fa-tags"></i>
                Thanh Niên
            </a>
        </li>
        <li>
            <a href="ecommerce_products.html">
                <i class="fa fa-sitemap"></i>
                Dân Trí
            </a>
        </li>
    </ul>
</li>
<li>
    <a href="javascript:;">
        <i class="fa fa-th"></i>
            <span class="title">
                Kênh
            </span>
            <span class="selected">
            </span>
            <span class="arrow">
            </span>
    </a>
    <ul class="sub-menu">
        <li>
            <a href="table_basic.html">
                Kinh Doanh
            </a>
        </li>
        <li>
            <a href="table_responsive.html">
                Giải trí
            </a>
        </li>
        <li>
            <a href="table_managed.html">
                Managed Datatables
            </a>
        </li>
        <li>
            <a href="table_editable.html">
                Editable Datatables
            </a>
        </li>
        <li>
            <a href="table_advanced.html">
                Advanced Datatables
            </a>
        </li>
        <li>
            <a href="table_ajax.html">
                Ajax Datatables
            </a>
        </li>
    </ul>
</li>
</ul><div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.3; display: none; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; z-index: 99; right: 1px; height: 594.3951120162933px; background: rgb(161, 178, 189);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
<!-- END SIDEBAR MENU -->
</div>
</div>
<!-- /ko -->
<!-- END SIDEBAR MENU -->

<!-- BEGIN CONTENT -->
<div class="container-fluid page-host" data-bind="router: { transition:'entrance' }"></div>
<!-- END CONTENT -->

</div>
</div>
</section>